import React, { useState, Component, FC } from 'react';
import request from "../../api"
import { NavBar, Swiper, Mask, Button, Tag, List ,Badge,Cascader} from 'antd-mobile'
import {
    ShopbagOutline,
    MessageOutline,
    AppstoreOutline,
    UpOutline,
  } from "antd-mobile-icons";
import { Carousel } from 'antd';
import "./detail.css"
import Bottomshopp from '../../components/Xiangqing';
import RecommendList from '../../components/RecommendList';

interface Props {
    history: any,
    location: any,
    match: any
}
interface State {
    detaillist: {
        img1: string,
        img2: string,
        img3: string,
        img4: string,
        originprice: number,
        category: string,
        brand: string,
        proname: string,
        sales: number,
    }

}




class Detail extends Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = {
            detaillist: {
                img1: "",
                img2: "",
                img3: "",
                img4: "",
                originprice: 0,
                category: "",
                brand: "",
                proname: "",
                sales: 0

            }
        }
    }

    componentDidMount() {
        
        console.log(this.props.match.params);
        
        request.mypro.pro_detail(this.props.match.params).then((ok) => {
            this.setState({ detaillist: ok.data.data }, () => {
                console.log(this.state.detaillist);

            })

        }).catch()
    }
    back() {
        console.log(666);

    }
    render() {
        
        return (
            <div className='detail'>
                <NavBar style={{ "--border-bottom": "solid 1px #ccc" }} onBack={this.back}>商品详情</NavBar>
                <Swiper>

                    <Swiper.Item>
                        <div className='imgbox' >
                            <img src={this.state.detaillist.img1} alt="" />
                        </div>

                    </Swiper.Item>
                    <Swiper.Item>
                        <div className='imgbox'>
                            <img src={this.state.detaillist.img2} alt="" />

                        </div>
                    </Swiper.Item>
                    <Swiper.Item>

                        <div className='imgbox'>
                            <img src={this.state.detaillist.img3} alt="" />

                        </div>
                    </Swiper.Item>
                    <Swiper.Item>

                        <div className='imgbox'>
                            <img src={this.state.detaillist.img4} alt="" />
                        </div>
                    </Swiper.Item>
                </Swiper>
                <div className='detail_text'>
                    <p className='money'>
                        <span>¥<span>{this.state.detaillist.originprice}</span></span>
                        <span className='xiaoliang'>销量:{this.state.detaillist.sales}</span>
                    </p>
                    <p>
                        <Tag round color='danger'><span>{this.state.detaillist.brand}</span></Tag>
                        <Tag round color='primary'><span>{this.state.detaillist.category}</span></Tag>
                        <span style={{ "fontWeight": "bold" }}>{this.state.detaillist.proname}</span>
                    </p>
                </div>

                <div className='list_list'>
                    <List>
                        <List.Item onClick={() => { }} extra={""}>送至</List.Item>

                    </List>
                </div>
                <div className='cainixihuang'>
                    <p>猜你喜欢</p>
                    <RecommendList></RecommendList>
                </div>

                <Bottomshopp pid={this.props.match.params.proid}></Bottomshopp>
            </div>
        );
    }
}

export default Detail;